<!DOCTYPE html>
<html>

<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${pageContext.request.contextPath}/resources/easyui/demo/demo.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/easyui/jquery.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/resources/easyui/datagrid-filter.js"></script>


<body>
	<h2>Client Side Pagination in DataGrid</h2>
	<p>This sample shows how to implement client side pagination in
		DataGrid.</p>
	<div style="margin: 20px 0;"></div>

	<table id="dg" title="Client Side Pagination"
		style="width: 700px; height: 400px"
		data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:20,
                toolbar:tb">

	</table>

	<div id="tb">
		<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
			onclick="javascript:alert('Add')">Add</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-cut" plain="true"
			onclick="javascript:alert('Cut')">Cut</a> <a href="#"
			class="easyui-linkbutton" iconCls="icon-save" plain="true"
			onclick="javascript:alert('Save')">Save</a>
	</div>
	<script>
		

		(function($) {
			function pagerFilter(data) {
				if ($.isArray(data)) { // is array
					data = {
						total : data.length,
						rows : data
					}
				}
				var target = this;
				var dg = $(target);
				var state = dg.data('datagrid');
				var opts = dg.datagrid('options');
				if (!state.allRows) {
					state.allRows = (data.rows);
				}
				if (!opts.remoteSort && opts.sortName) {
					var names = opts.sortName.split(',');
					var orders = opts.sortOrder.split(',');
					state.allRows
							.sort(function(r1, r2) {
								var r = 0;
								for (var i = 0; i < names.length; i++) {
									var sn = names[i];
									var so = orders[i];
									var col = $(target).datagrid(
											'getColumnOption', sn);
									var sortFunc = col.sorter
											|| function(a, b) {
												return a == b ? 0 : (a > b ? 1
														: -1);
											};
									r = sortFunc(r1[sn], r2[sn])
											* (so == 'asc' ? 1 : -1);
									if (r != 0) {
										return r;
									}
								}
								return r;
							});
				}
				var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
				var end = start + parseInt(opts.pageSize);
				data.rows = state.allRows.slice(start, end);
				return data;
			}

			var loadDataMethod = $.fn.datagrid.methods.loadData;
			var deleteRowMethod = $.fn.datagrid.methods.deleteRow;
			$
					.extend(
							$.fn.datagrid.methods,
							{
								clientPaging : function(jq) {
									return jq.each(function() {
										var dg = $(this);
										var state = dg.data('datagrid');
										var opts = state.options;
										opts.loadFilter = pagerFilter;
										var onBeforeLoad = opts.onBeforeLoad;
										opts.onBeforeLoad = function(param) {
											state.allRows = null;
											return onBeforeLoad.call(this,
													param);
										}
										var pager = dg.datagrid('getPager');
										pager.pagination({
											onSelectPage : function(pageNum,
													pageSize) {
												opts.pageNumber = pageNum;
												opts.pageSize = pageSize;
												pager.pagination('refresh', {
													pageNumber : pageNum,
													pageSize : pageSize
												});
												dg.datagrid('loadData',
														state.allRows);
											}
										});
										$(this)
												.datagrid('loadData',
														state.data);
										if (opts.url) {
											$(this).datagrid('reload');
										}
									});
								},
								loadData : function(jq, data) {
									jq
											.each(function() {
												$(this).data('datagrid').allRows = null;
											});
									return loadDataMethod.call(
											$.fn.datagrid.methods, jq, data);
								},
								deleteRow : function(jq, index) {
									return jq
											.each(function() {
												var row = $(this).datagrid(
														'getRows')[index];
												deleteRowMethod.call(
														$.fn.datagrid.methods,
														$(this), index);
												var state = $(this).data(
														'datagrid');
												if (state.options.loadFilter == pagerFilter) {
													for (var i = 0; i < state.allRows.length; i++) {
														if (state.allRows[i] == row) {
															state.allRows
																	.splice(i,
																			1);
															break;
														}
													}
													$(this).datagrid(
															'loadData',
															state.allRows);
												}
											});
								},
								getAllRows : function(jq) {
									return jq.data('datagrid').allRows;
								}
							})
		})(jQuery);

		function getData() {
			var rows = [];
			for (var i = 1; i <= 800; i++) {
				var amount = Math.floor(Math.random() * 1000);
				var price = Math.floor(Math.random() * 1000);
				rows.push({
					inv : 'Inv No ' + i,
					date : $.fn.datebox.defaults.formatter(new Date()),
					name : 'Name ' + i,
					amount : amount,
					price : price,
					cost : amount * price,
					note : 'Note ' + i
				});
			}
			return rows;
		}

		$(function() {
			$('#dg').datagrid({
				url : 'datagrid_data',
				columns : [ [ {
					field : 'itemid',
					title : 'Item ID',
					rowspan : 2,
					width : 80,
					sortable : true
				}, {
					field : 'productid',
					title : 'Product ID',
					rowspan : 2,
					width : 80,
					sortable : true
				}, {
					title : 'Item Details',
					colspan : 4
				} ], [ {
					field : 'listprice',
					title : 'List Price',
					width : 80,
					align : 'right',
					formatter : formatPrice,
					sortable : true
				}, {
					field : 'unitcost',
					title : 'Unit Cost',
					width : 80,
					align : 'right',
					formatter : formatPrice,
					sortable : true
				}, {
					field : 'attr1',
					title : 'Attribute',
					width : 100
				}, {
					field : 'status',
					title : 'Status',
					width : 60
				} ] ]
			}).datagrid('clientPaging');
		});
	
		$(function() {
			var dg = $('#dg').datagrid();
			dg.datagrid('enableFilter', [ {
				field : 'listprice',
				type : 'numberbox',
				options : {
					precision : 2
				},
				op : [ 'equal', 'notequal', 'less', 'greater' ]
			}, {
				field : 'unitcost',
				type : 'numberbox',
				options : {
					precision : 2
				},
				op : [ 'equal', 'notequal', 'less', 'greater' ],

			}, {
				field : 'status',
				type : 'combobox',
				options : {
					panelHeight : 'auto',
					data : [ {
						value : '',
						text : 'All'
					}, {
						value : 'P',
						text : 'P'
					}, {
						value : 'N',
						text : 'N'
					} ],
					onChange : function(value) {
						if (value == '') {
							dg.datagrid('removeFilterRule', 'status');
						} else {
							dg.datagrid('addFilterRule', {
								field : 'status',
								op : 'equal',
								value : value
							});
						}
						dg.datagrid('doFilter');
					}
				}
			} ]);
		});
		function formatPrice(val, row) {
			var n = new Number(val);
			return new Number(n.toFixed(2));
		}
	</script>
</body>
</html>